<template>
    <div class="book-recommend-bar">

        <!--1.最顶上的标题-->
        <el-row class="recommend-title-row" type="flex" justify="center">
            <el-col :span="14">
                <p>出版图书</p>

            </el-col>
        </el-row>

        <!--2.设置这一整个框框的长与宽-->
        <el-row class="recommend-table-row" type="flex" justify="center">
            <el-col :span="14">

                <!--3.卡片展示组件 有阴影有图片-->
                <el-card :body-style="{ padding: '0px' }" class="total-card">




                    <el-col :span="8" class="top-10">
                        <el-card class="top-10-card" :body-style="{ padding: '0px' }" shadow="never">
                            <el-row type="flex" justify="center">
                                <el-col class="top-10-content" :span="20">

                                    <div class="rank-row">
                                        <el-image :src="rankLogoImgUrl" class="rank-logo"></el-image>
                                        <p>编辑推荐</p>
                                    </div>


                                   <div>
                                         <a href="http://service.weibo.com/share/share.php?appkey=&title=&url=&searchPic=false&style=simple" target="_blank">
                                             <img width="25" height="25" :src="wbpic" @mouseover="wbpic = wbpichover" @mouseout="wbpic = wbpicorigin" alt="weibo">
                                         </a>
                                         <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" target="_blank">
                                             <img width="25" height="25":src="qqpic" @mouseover="qqpic = qqpichover" @mouseout="qqpic = qqpicorigin" alt="qzone">
                                         </a>
                                   </div>


                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>

                    <el-col :span="8" class="top-10">
                        <el-card class="top-10-card" :body-style="{ padding: '0px' }" shadow="never">

                            <el-row type="flex" justify="center">
                                <el-col class="top-10-content" :span="20">
                                    <div class="rank-row">
                                        <el-image :src="rankLogoImgUrl" class="rank-logo"></el-image>
                                        <p>热搜榜</p>
                                    </div>

                                    <div>
                                        <div v-for="(item_m,index_m) in goodBookList" @mouseover="hovercontent_m(index_m)" @mouseout="showUpdate_m = -1" :key="item_m.id" class="rank-content">

                                            <el-row class="detailheight" v-if="showUpdate_m == index_m">
                                                <el-col  :span="10">
                                                    <img width="100" height="100" :src="item_m.url" @click="GoToDetail"></img>
                                                </el-col>
                                                <el-col :span="14"><p class="detailcontent">{{item_m.content}}</p></el-col>
                                            </el-row>

                                            <el-col :span="2"><p class="detailcontent" v-if="showUpdate_m != index_m">{{index_m}}</p></el-col>

                                            <el-col :span="22"><p class="detailcontent" v-if="showUpdate_m != index_m">{{item_m.title}}</p></el-col>
                                        </div>
                                    </div>


                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>

                    <el-col :span="8" class="top-10">
                        <el-card class="top-10-card" :body-style="{ padding: '0px' }" shadow="never">
                            <el-row type="flex" justify="center">
                                <el-col class="top-10-content" :span="20">

                                    <div class="rank-row">
                                        <el-image :src="rankLogoImgUrl" class="rank-logo"></el-image>
                                        <p>新书上榜</p>
                                    </div>

                                    <div>
                                        <div v-for="(item,index) in topTenData" @mouseover="hovercontent(index)" @mouseout="showUpdate = -1" :key="item.id" class="rank-content">

                                            <el-col v-show="showUpdate == index" class="detailheight">书本具体内容</el-col>
                                            <el-col :span="2"><p class="detailcontent" v-show="showUpdate != index">{{item.rank}}</p></el-col>
                                            <el-col :span="22"><p class="detailcontent" v-show="showUpdate != index">{{item.bookName}}</p></el-col>


                                        </div>
                                    </div>

                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>


                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: "BookRecommendBar",
        data() {
            return {
                wbpic: require("../../assets/weibo.png"),
                wbpichover: require("../../assets/weiHov.png"),
                wbpicorigin: require("../../assets/weibo.png"),
                qqpic: require("../../assets/qq.png"),
                qqpichover: require("../../assets/qqHov.png"),
                qqpicorigin: require("../../assets/qq.png"),

                showUpdate: -1,
                showUpdate_m: -1,
                msg: "这是书籍推荐组件",
                activeName :'1',

                seen :true,
                rankLogoImgUrl: require("../../assets/rankLogo.png"),
                recommendLogoUrl: require("../../assets/recommendLogo.png"),
                topTenData: [
                    {rank: 1, bookName: "祈祷落幕时"},
                    {rank: 2, bookName: "白夜行"},
                    {rank: 3, bookName: "幻夜"},
                    {rank: 4, bookName: "秘密"},
                    {rank: 5, bookName: "信"},
                    {rank: 6, bookName: "单恋"},
                    {rank: 7, bookName: "流星之绊"},
                    {rank: 8, bookName: "放学后"},
                    {rank: 9, bookName: "解忧杂货店"},
                    {rank: 10, bookName: "分身"}
                ],
                goodBookList: [
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "醉步男",
                        content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"
                    },
                        {
                            url: "https://images-na.ssl-images-amazon.com/images/I/71k2fG9T4FL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                            title: "人性的枷锁",
                            content: "“故事圣手”“天才小说家”毛姆长篇代表作，一本解答人生奥义的希望之书"
                        },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/51uU6L%2BrfpL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "怒",
                        content: "日本重量级芥川奖作家吉田修一，《恶人》之后又一新作，比《白夜行》更凄美，比《告白》更深刻，照见都市人无处遁形的孤独"
                    },
                        {
                            url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                            title: "醉步男",
                            content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"
                        }
                ],
                bestBook: {
                    url: "https://images-na.ssl-images-amazon.com/images/I/81pZB30%2BSCL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                    title: "再见，吾爱",
                    author: "雷蒙德·钱德勒",
                    content: "读了《再见，吾爱》才发现，有些人你就是戒不掉，有些事你就是妥协不了！"
                }
            }
        },
        methods: {
            hovercontent:function(index){
                console.log(index);
                this.showUpdate = index;
            },
            hovercontent_m:function(index){
                console.log(index);
                this.showUpdate_m = index;
            },
            GoToDetail:function () {
                this.$router.push({name: "detail"});
            }

        },
        components: {}
    }
</script>

<style scoped>

    .detailheight{
        height: 100px;
    }

    .book-img{
        width:100px;
        height:100px;
    }

    .detailcontent{
        font-size: 15px;
        color: #9e9e9e;
        line-height:50px;
        text-align: left;

    }
    .items span{
        border-bottom: 1px solid #eee
    }

    .book-recommend-bar {
        height: 650px;
        background-color: #f0f0f0;
    }

    p {
        text-align: center;
        margin: 0;
    }



    .el-col {
        height: auto;
    }

    .recommend-title-row p {
        font-size: 25px;
        line-height: 100px;
        height: 100px;
    }

    .recommend-table-row {
        height: 550px;
    }

    .total-card {
        height: 550px;
    }

    .best-book-card {
        height: 548px;
        border-radius: 0;
    }

    .best-book-content {
        margin-top: 30px;
    }

    .best-book-card .el-link {
        font-size: 25px;
        color: #000;
        line-height: 30px;
        height: 30px;
    }

    .best-book-card p {
        font-size: 12px;
        color: #9e9e9e;
        height: 20px;
        line-height: 20px;
        text-align: left;
    }

    .best-book-card .best-book-author{
        margin-top: 20px;
    }

    .best-book-card .best-book-inf{
        margin-top: 30px;
    }

    .best-book-card .best-book-image{
        margin-top: 70px;
    }

    .top-10-card {
        height: 548px;
        border-radius: 0;
    }


    .top-10-content {
        height: 510px;
        margin-top: 20px;
    }

    .rank-row {
        height: 40px;
        margin-bottom: 10px;
    }

    .rank-row .el-image {
        height: 39px;
        width: 39px;
    }

    .rank-logo {
        float: left;
    }

    .rank-row p {
        height: 40px;
        display: block;
        line-height: 40px;
        float: left;
        margin-left: 16px;
        font-size: 20px;
    }

    .rank-content {
        height: 30px;
        margin: 5px 0;
    }

    .el-divider {
        margin: 0;
    }

    .rank-content .el-col {
        height: 40px;
    }

    .rank-content p {
        height: 40px;
        line-height: 40px;
        color: #9e9e9e;
    }

    .rank-content .el-link {
        height: 40px;
        line-height: 40px;
        color: #9e9e9e;
    }

    .good-book-card {
        height: 273px;
        border-radius: 0;
    }

    .good-book-img-row {
        margin-top: 20px;
    }

    .good-book-inf-row {
        margin-top: 10px;
    }

    .good-book-inf-row p {
        margin-top: 5px;
        font-size: 12px;
        color: #9e9e9e;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }


</style>